<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>充值明细</span>
    </div>
    <v-searchForm
      :form-data="filter_info"
      :form-title="formTitle"
      @search="search"
      @reset="reset"/>

    <v-tableBtns
      :show-export="false"
      :show-create="true"
      :show-upload="true"
      :upload-url="uploadUrl"
      title="充值记录"
      @addNew="addNew"
    />

    <v-table
      :table-title="tableTitle"
      :table-data="tableData"
      width="60px"
      btn-class="btn"
      @sortChange="sortChange"
      @edit="edit"
      @del="del"
    />
    <v-pagination
      :page-info="pageInfo"
      :get-table-list="getTableList"
    />

    <!--添加公司-->
    <el-dialog
      :visible.sync="dialogVisible"
      :title="isEdit?'修改充值明细':'添加充值明细'"
      width="30%"
      center>
      <v-form
        :form-title="modifyTitle"
        :form-data="modifyData"
      />
      <span class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    name: 'Home',
    data() {
      return {
        uploadUrl: process.env.BASE_API + 'action/TaoLaunchCorpInfo/saveFile',
        companyName: '',
        dialogVisible: false,
        // f分页
        pageInfo: {
          pageNumber: 1,
          pageSize: 30,
          totalPage: 0,
          totalRow: 0
        },
        // 排序
        sidx: 'date',
        sortKey: null,
        formTitle: [
          {
            cn: '收款公司: ',
            en: 'launch_corp'
          },
          {
            cn: '时间: ',
            en: 'created_at',
            type:'time'
          },
        ],
        filter_info: {},

        modifyTitle:[
          {
            cn: '时间: ',
            en: 'date',
            type:'time'
          },
          {
            cn: '金额: ',
            en: 'money',
            type:'money'
          },
          {
            cn: '主体: ',
            en: 'pay_corp'
          },
          {
            cn: '收款公司: ',
            en: 'launch_corp'
          },
        ],
        modifyData:{},

        tableTitle: [
          {
            cn: '时间 ',
            en: 'date',
            type:'time',
            sortable:true
          },
          {
            cn: '金额',
            en: 'money',
          },
          {
            cn: '主体 ',
            en: 'pay_corp',
            sortable:true
          },
          {
            cn: '收款公司 ',
            en: 'launch_corp'
          },
        ],
        tableData: [],
        exportTitle: [],
        exportData: [],

        isEdit:false,  //是否是修改
      }
    },
    computed: {
      ...mapGetters([
        'name',
        'roles'
      ]),
      filter_infos() {
        const data = {}
        const origin = this.filter_info
        for (const key in origin) {
          if (!this.filter_info[key] && this.filter_info[key] !== 0) {
            this.$delete(this.filter_info, key)
            continue
          }
          if (key === 'created_at') {
            data.begin_date = origin[key][0]
            data.end_date = origin[key][1]
          } else {
            data[key] = origin[key]
          }
        }
        if (!origin.created_at) {
          delete data.begin_date
          delete data.end_date
        }
        return data
      }
    },
    activated() {
      this.getTableList()
    },
    methods: {
      getTableList(data) {
        const loading = this.$loading()
        let datas = {
          ...this.filter_infos,
          page: this.pageInfo.pageNumber, rows: this.pageInfo.pageSize,
          sidx: this.sidx,
          sortKey: this.sortKey
        }
        this.$get('action/TaoRechargeInfo/dataGrid', datas)
          .then(res => {
            let list = []
            if (res.data.list && res.data.list.length) {
              list = res.data.list.map((item, index) => {
                item.recovery_rate = (item.recovery_rate ? (item.recovery_rate * 100).toFixed(2) : 0) + '%'
                item.remaining_time = item.remaining_time ? item.remaining_time.toFixed(2) : 0
                item.act_rate = (item.act_rate ? (item.act_rate * 100).toFixed(2) : 0) + '%'
                return item
              })
            }
            this.pageInfo.totalPage = res.data.totalPage
            this.pageInfo.totalRow = res.data.totalRow
            this.tableData = list || []
            loading.close()
          })
          .catch(err => {
            loading.close()
            this.$message({
              message: err.msg || '获取数据失败',
              type: 'error'
            })
          })
      },

      // 搜索
      search() {
        this.pageInfo.pageNumber=1
        this.getTableList()
      },

      reset() {
        this.filter_info = {}
        this.getTableList()
      },

      addNew() {
        this.dialogVisible = true
        this.isEdit = false
      },
      edit(val) {
        this.dialogVisible = true
        this.modifyData = this.$deepClone(val.row)
        this.isEdit = true
      },

      submit() {
        const data = this.modifyData
        this.$post('action/TaoRechargeInfo/save', data)
          .then(res => {
            this.dialogVisible = false
            this.modifyData = {}
            this.getTableList()
            this.$message({
              message: res.msg,
              type: 'success'
            })
          })
      },
      del(val){
        const data = {
          id: val.row.id
        }
        this.$post('action/TaoRechargeInfo/del', data)
          .then(res => {
            this.dialogVisible = false
            this.getTableList()
            this.$message({
              message: res.msg,
              type: 'success'
            })
          })
      },

      // 排序
      sortChange({ column, prop, order }) {
        console.log(column, prop, order)
        this.sidx = prop || 'date'
        this.sortKey = order === 'ascending' ? 'asc' : null
        this.getTableList()
      }

    }
  }
</script>

<style scoped>
  .tips {
    text-align: center;
  }
  .dialog-footer{
    display: flex;
    justify-content: center;
  }
</style>
